<template>
  <d2-container class="page">
    <el-row :gutter="20">
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <div style="position: relative;">
          <h4 class="my_header">字典</h4>
          <el-button type="primary" size="mini" style="position: absolute;right: 0;top: 0;" @click="add_or_edit_dictType(1)">新增</el-button>
        </div>
        <div style="height: 18px;"></div>
        <div class="grid-content bg-purple">
          <el-table
            :data="dictTypeData"
            style="width: 100%"
            border
            highlight-current-row
            @row-click="showDictData"
            height="600">
            <el-table-column label="序号" type="index" align="center" show-overflow-tooltip width="50px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="字典名称">
            </el-table-column>
            <el-table-column
              align="center"
              :show-overflow-tooltip="true"
              prop="comment"
              label="描述"
              width="150">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="warning" @click="add_or_edit_dictType(2, scope.row)">修改</el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="dictTypeDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="typePageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="typeTotal">
          </el-pagination>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <div style="position: relative;">
          <h4 class="my_header">指标</h4>
<!--          <el-upload-->
<!--            class="upload-demo"-->
<!--            action="/"-->
<!--            :show-file-list="false"-->
<!--            :on-preview="handlePreview"-->
<!--            :on-remove="handleRemove"-->
<!--            :before-remove="beforeRemove"-->
<!--            multiple-->
<!--            :limit="3"-->
<!--            :on-exceed="handleExceed"-->
<!--            :file-list="fileList">-->
<!--            <el-button size="mini" type="primary" style="position: absolute;right: 0;top: 0;">数据导入</el-button>-->
<!--          </el-upload>-->
          <el-button type="primary" size="small" style="position: absolute;right: 0;top: 0;" @click="showCreatePage(1)">新增</el-button>
          <el-button type="warning" size="small" style="position: absolute;right: 180px;top: 0;" @click="downDictDataForExcel">字典导出</el-button>
<!--          <el-button type="success" size="small" >数据导入</el-button>-->
          <el-upload
            class="upload-demo"
            :action="uploadDictDataUrl"
            :multiple="false"
            :show-file-list="false"
            :on-preview="handlePreview"
            :on-success="fileSuccess"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :file-list="fileList"
            :accept="dictAccept"
          >
            <el-button style="position: absolute;right: 80px;top: 0;" size="small" type="primary">字典导入</el-button>
          </el-upload>
        </div>
        <div class="grid-content bg-purple">
          <el-table
            :data="dictData"
            style="width: 100%"
            border
            height="600">
            <el-table-column label="序号" type="index" align="center" >
            </el-table-column>
<!--            <el-table-column-->
<!--              label="ID"-->
<!--              align="center"-->
<!--              show-overflow-tooltip-->
<!--              width="50px"-->
<!--              prop="code">-->
<!--            </el-table-column>-->
            <el-table-column
              align="center"
              prop="val"
              label="指标名称">
            </el-table-column>
            <el-table-column
              align="center"
              :show-overflow-tooltip="true"
              prop="comment"
              label="描述">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="warning"
                  @click="showCreatePage(2, scope.row)">修改</el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="dictDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleDictSizeChange"
            @current-change="handleDictCurrentChange"
            :current-page="currentDictPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="dictPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="DictTotal">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="dictTitle" :visible.sync="dictVisible" :modal="false" width="40%">
      <el-row>
        <!-- ====================== -->
        <el-col class="stepBox">
          <el-form ref="form" :model="createData" label-width="120px" size="mini">
            <el-form-item label="指标名称：">
              <el-input v-model="createData.val"></el-input>
            </el-form-item>
<!--            <el-form-item label="代码：">-->
<!--              <el-input v-model="createData.code"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="描述：">
              <el-input
                type="textarea"
                :rows="8"
                placeholder="请输入内容"
                v-model="createData.comment">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="pull-right" type="primary" v-show="cOre" @click="createOrSaveDict('create')">创建</el-button>
              <el-button class="pull-right" type="primary" v-show="!cOre" @click="createOrSaveDict('save')">更新</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
    <!--类型新增-->
    <el-dialog :title="dictTypeTitle" :visible.sync="dictTypeVisible" :modal="false" width="40%">
      <el-row>
        <!-- ====================== -->
        <el-col class="stepBox">
          <el-form ref="form" :model="createTypeData" label-width="120px" size="mini">
            <el-form-item label="字典名称：">
              <el-input v-model="createTypeData.name"></el-input>
            </el-form-item>
            <el-form-item label="描述：">
              <el-input
                type="textarea"
                :rows="8"
                placeholder="请输入内容"
                v-model="createTypeData.comment">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="pull-right" type="primary" v-show="cOre" @click="createOrSaveDictType('create')">创建</el-button>
              <el-button class="pull-right" type="primary" v-show="!cOre" @click="createOrSaveDictType('save')">更新</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </d2-container>
</template>

<script>
import { delSysFramework, getList } from '@api/sys.controller'
import { delAttrType, getAttrTypeList, saveAttrType } from '@api/attr.type'
import { delAttr, getAttrList, saveAttr } from '@api/attr'

export default {
  name: 'dict',
  data () {
    return {
      uploadDictDataUrl: process.env.VUE_APP_API + 'import/attribute_excel_data',
      fileList: [],
      dictAccept: '.xls,.xlsx',
      typeVisible: false,
      // tableData: [{ type: '机种', num: 'MachineType' }, { type: '飞机型号', num: 'Model' }],
      dictTypeData: [],
      dictData: [],
      numTableData: [{ key: '1', value: '客机' }, { key: '2', value: '战斗机' }, { key: '3', value: '无人机' }],
      currentPage: 1,
      currentTypePage: 1,
      typePageSize: 10,
      typeTotal: 0,
      currentDictPage: 1,
      dictPageSize: 10,
      DictTotal: 0,
      dictTypeVisible: false,
      dictVisible: false,
      createTypeData: {},
      createData: {},
      currentTypeData: {},
      dictTypeTitle: '字典新增',
      dictTitle: '指标新增',
      cOre: true
    }
  },
  methods: {
    getTypeOrDictList () {
      // 类型数据
      let typeQuery = {
        'num': this.currentTypePage,
        'size': this.typePageSize
      }
      getAttrTypeList(typeQuery).then(res => {
        this.typeTotal = res.count
        this.dictTypeData = res.list
      })
      // // 字典数据
      // let DictQuery = {
      //   'num': this.currentDictPage,
      //   'size': this.dictPageSize
      // }
      // getAttrList(DictQuery).then(res => {
      //   this.DictTotal = res.count
      //   this.dictData = res.list
      // })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.typePageSize = val
      this.getTypeOrDictList()
    },
    handleCurrentChange (val) {
      this.currentTypePage = val
      console.log(`当前页: ${val}`)
      this.getTypeOrDictList()
    },
    add_or_edit_dictType (val, row) {
      // 字典类型新增
      if (val === 1) {
        this.createTypeData = {
          name: '',
          comment: ''
        }
        this.dictTypeTitle = '字典新增'
        this.cOre = true
      } else {
        this.createTypeData = row
        this.dictTypeTitle = '字典修改'
        this.cOre = false
      }
      this.dictTypeVisible = true
    },
    createOrSaveDictType (item) {
      if (item === 'create') {
        this.createTypeData.id = ''
      }
      saveAttrType(this.createTypeData).then(() => {
        this.getTypeOrDictList()
        this.dictTypeVisible = false
        if (item === 'create') {
          this.$message.success('创建成功')
        } else {
          this.$message.success('修改成功')
        }
        this.$EventBus.$emit('updateDictList')
      })
    },
    showCreatePage (val, row) {
      // 字典新增
      // console.log(Object.keys(this.currentTypeData).length)
      if (!(Object.keys(this.currentTypeData).length === 0)) {
        if (val === 1) {
          this.createData = {
            name: '',
            comment: '',
            attributeTypeId: this.currentTypeData.id
          }
          this.dictTitle = '指标新增'
          this.cOre = true
        } else {
          this.createData = row
          this.dictTitle = '指标修改'
          this.cOre = false
        }
        this.dictVisible = true
      } else {
        this.$message.warning('请先选择字典！！！')
      }
    },
    createOrSaveDict (item) {
      if (item === 'create') {
        this.createData.id = ''
      }
      saveAttr(this.createData).then(() => {
        let DictQuery = {
          'num': this.currentDictPage,
          'size': this.dictPageSize,
          't': {
            'attributeTypeId': this.currentTypeData.id
          }
        }
        getAttrList(DictQuery).then(res => {
          this.DictTotal = res.count
          this.dictData = res.list
        })
        this.dictVisible = false
        if (item === 'create') {
          this.$message.success('创建成功')
        } else {
          this.$message.success('修改成功')
        }
        this.$EventBus.$emit('updateDictList')
      })
    },
    dictTypeDelete (id) {
      // 类型删除
      this.$confirm('确认删除？', '删除字典', {
        distinguishCancelAndClose: true,
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      })
        .then(() => {
          delAttrType(id).then(() => {
            this.getTypeOrDictList()
            this.$message.success('删除成功')
            this.$EventBus.$emit('updateDictList')
          })
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    dictDelete (id) {
      // 类型删除
      this.$confirm('确认删除？', '删除指标', {
        distinguishCancelAndClose: true,
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      })
        .then(() => {
          delAttr(id).then(() => {
            let DictQuery = {
              'num': this.currentDictPage,
              'size': this.dictPageSize,
              't': {
                'attributeTypeId': this.currentTypeData.id
              }
            }
            getAttrList(DictQuery).then(res => {
              this.DictTotal = res.count
              this.dictData = res.list
            })
            this.$message.success('删除成功')
            this.$EventBus.$emit('updateDictList')
          })
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    showDictData (row, column, event) {
      // 显示字典类型对应的字典数据
      let typeId = row.id
      this.currentTypeData = row
      let DictQuery = {
        'num': this.currentDictPage,
        'size': this.dictPageSize,
        't': {
          'attributeTypeId': typeId
        }
      }
      getAttrList(DictQuery).then(res => {
        this.DictTotal = res.count
        this.dictData = res.list
      })
    },
    handleSee (index, row) {
      console.log(index)
      window.location.href = '/'
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    fileSuccess (response, file, fileList) {
      // console.log(file)
      if (response.code === 0) {
        this.getTypeOrDictList()
        this.$message.success('字典数据上传成功！')
      } else {
        this.$message.error('文件格式错误，请重新上传！')
      }
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    downDictDataForExcel () {
      // console.log(process.env.VUE_APP_API)
      window.location.href = process.env.VUE_APP_API + 'down/attribute_excel_data'
    },
    handleDictSizeChange (val) {
      console.log(`每页 ${val} 条`)
      let DictQuery = {
        'num': this.currentDictPage,
        'size': val,
        't': {
          'attributeTypeId': this.currentTypeData.id
        }
      }
      getAttrList(DictQuery).then(res => {
        this.DictTotal = res.count
        this.dictData = res.list
      })
    },
    handleDictCurrentChange (val) {
      this.currentTypePage = val
      console.log(`当前页: ${val}`)
      let DictQuery = {
        'num': val,
        'size': this.dictPageSize,
        't': {
          'attributeTypeId': this.currentTypeData.id
        }
      }
      getAttrList(DictQuery).then(res => {
        this.DictTotal = res.count
        this.dictData = res.list
      })
    }
  },
  mounted () {
    this.getTypeOrDictList()
  }
}
</script>

<style scoped>
  .my_header{
    font-size: 22px;
    height: 40px;
    line-height: 40px;
    margin: 0px;
    border-bottom: 1px solid #ff5500;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    height: 600px;
    /*background: #d3dce6;*/
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .el-pagination {
    text-align: center;
    background: floralwhite;
  }
</style>
